import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';
const computedBehavior = require('miniprogram-computed')

// 购物车API
import {
  goodsSelectAmountPlus, // 添加商品在购物车中的数量
  goodsSelectAmountMinus, // 减少商品在购物车中的
  removeCartGoods, // 删除购物车中指定商品
} from '../../api/cartApi'

Component({
  behaviors:[computedBehavior],
  // 使用计算属性
  computed:{
    // 计算商品已售件数
    sale(data){
      let number =  data.goods.commodity_number
     return number > 9999 ? (number/10000).toFixed(1)+"万":number;
    }
  },

  // 定义使用该组件需要传入的数据
  properties: {
    // 商品基本信息
    goods: {
      type: Object,
      value: {}
    },
    // 商品在列表中的索引
    index: {
      type: Number,
      value: -1
    },
    // 商品展示方向：可选值 row/column
    direction: {
      type: String,
      value: "row"
    },
    // 步进器是否展示：true 展示/false 不展示，
    // 只有当商品在购物车中的数量大于0时才显示
    showStepper: {
      type: Boolean,
      value: true
    },

    /**
     * 是否显示添加商品按钮
     */
    showAddBtn:{
      type:Boolean,
      value:true
    },

    // 是否在购物车中使用该组件，如果为true时，当步进器的值为1时，
    // 点击减小按钮时，会发射一个事件numberzero，表示将步进器中的值减小到0，
    // 可以在购物车中通过监听该事件，做一些处理
    // 携带的参数有：当前商品在列表中的索引（index）、最新的商品选中数量（amount）
    shoppingCart: {
      type: Boolean,
      value: false
    },
  },
  data: {
    showRed:false, //是否显示红点
    curLeft: 0, //红点距离左边的距离,相当于x坐标
    curTop: 0, //红点距离顶部的距离相当于y坐标
    animation: {}, //红点的动画
  },
  methods: {

    // ------- 处理：点击商品事件 --------
    handleClickGoods(e) {
      console.log("点击了商品");
      wx.navigateTo({
        url: '/pages/main/goodDetails/index?goodsId=' +
          this.properties.goods.commodity_id,
      })
    },

    /**
     * 处理点击商品的加入购物车按钮
     * @param {Object} e 事件对象 
     */
    handleClickAddGoods(e) {
      // 使手机 进行短暂的震动（15ms）
      wx.vibrateShort({
        type: "heavy"
      })
      if (getApp().token) {
        // 将当前商品加入购物车一件
        goodsSelectAmountPlus(this.properties.goods.commodity_id).then(data => {
          this.setData({
            'goods.selectAmount': data.selectAmount
          })
          getApp().initialCartTabBarBadge() // 初始化购物车tabbar上的徽标数量
        })
        console.log("点击商品添加按钮，数量变更为：" + this.properties.goods.selectAmount);
        //显示小红点,并抛入购物车
        this.flyCart(e)

      } else {
        // 如果没有token，跳转到登录页面
        wx.navigateTo({
          url: '/pages/my/login/login',
        })
      }
    },

    /**
     * 处理点击步进器的添加按钮事件
     */
    handleStepperPlus(e) {
      // 使手机 进行短暂的震动（15ms）
      wx.vibrateShort({
        type: "heavy"
      })
      console.log("点击了Goods组件的步进器添加按钮：", e);
      // 将当前商品加入购物车一件
      goodsSelectAmountPlus({
        goods_id:this.properties.goods.commodity_id,
        specificationid:this.properties.goods.commodity_specification[0].id
      }).then(data => {
        this.setData({
          'goods.selectAmount': data.selectAmount
        })
        getApp().initialCartTabBarBadge() // 初始化购物车tabbar上的徽标数量
        if (this.properties.shoppingCart) {
          this.triggerEvent('numberzero', {
            index: this.properties.index,
            amount: data.selectAmount,
            goodsId: this.properties.goods.commodity_id
          })
        }
      })
    },

    /**
     * 处理点击步进器的减少按钮事件
     */
    handleStepperMinus() {
      // 使手机 进行短暂的震动（15ms）
      wx.vibrateShort({
        type: "heavy"
      })
      // 对指定ID的商品在购物车中的数量进行减一
      goodsSelectAmountMinus(this.properties.goods.commodity_id,this.properties.goods.commodity_specification[0].id).then(data => {
        this.setData({
          'goods.selectAmount': data.selectAmount
        })
        getApp().initialCartTabBarBadge() // 初始化购物车tabbar上的徽标数量
        if (this.properties.shoppingCart) {
          this.triggerEvent('numberzero', {
            index: this.properties.index,
            amount: data.selectAmount,
            goodsId: this.properties.goods.commodity_id
          })
        }
      })
    },



    /**
     * 处理当步进器中数量为1，并且点击了减小按钮的事件 （删除购物车中商品）
     */
    handleGoodsoverlimit() {
      if (this.properties.shoppingCart) {
        /*
        自定义事件发射：该事件在属性shoppingCart为true时会发射
        携带的参数有：当前商品在列表中的索引（index）、最新的商品选中数量（amount）
        */
        this.triggerEvent('numberzero', {
          index: this.properties.index,
          amount: 0,
          goods_id: this.properties.goods.commodity_id,
          specificationid:this.properties.goods.commodity_specification[0].id
        })
      } else {
        // 删除购物车中的商品
        removeCartGoods([this.properties.goods.commodity_id]).then(data => {
          this.setData({
            'goods.selectAmount': 0
          })
          getApp().initialCartTabBarBadge() // 初始化购物车tabbar上的徽标数量
        })
        console.log("组件goods商品已选数量发生改变：" + this.properties.goods.selectAmount);
      }
    },

    // ------- 处理：点击步进器事件 -------
    handleClickStepper(e) {
      //显示小红点,并抛入购物车
      this.flyCart(e)
      //  该函数只是用来阻止事件的冒泡
      //  该函数不会对步进器绑定的数值进行改变，对数值进行处理会在change事件完成，
    },
    /**
     * 处理点击加号按钮或者步进器的添加商品按钮后将一个小红点以抛物线的形式"抛入"购物车中
     * @param {e} e 传入事件对象
     */
    flyCart(e) {
      console.log(e,this.data);
      let curX = Math.round(e.detail.x)
      let curY = Math.round(e.detail.y)
      console.log("开启添加商品到购物车的动画:=======================================================", curX, curY);
      //计算X轴位移距离
      let moveX = curX - 300
      //计算y轴位移距离
      let moveY = curY - 945
      //创建一个动画对象
      let animation = wx.createAnimation({
        delay: 0,
        duration: 800,
        timingFunction: 'ease'
      })
      animation.translateX(moveX)
      animation.translateY(moveY)
      animation.step()
      this.setData({
        showRed: true,
        curLeft: parseInt(curX), 
        curTop: parseInt(curY),
        animation: animation.export()
      })
      console.log(this.data);
    }
  }
})